<template>
    <div>
        <span class="title1">房源分配 /</span>
        <span class="title2">开始分配</span>
        <div class="container">
            <div class="card-container1">
                <el-card>
                    <div style="display: flex; align-items: center; margin-top: 10px">
                        <el-select v-model="query.communityId" placeholder="请选择園區" style="flex: 1">
                            <el-option
                                    v-for="item in community"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="query.buildingId" placeholder="请选择樓棟" style="flex: 1; margin-left: 10px">
                            <el-option
                                    v-for="item in building"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="query.floor" placeholder="请选择樓層" style="flex: 1; margin-left: 10px">
                            <el-option
                                    v-for="item in floors"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button type="primary" style="margin-left: 10px;" @click="getUserList">查询</el-button>
                        <el-button plain @click="resetQuery">重置</el-button>
                    </div>
                    <el-col></el-col>
                    <el-row :gutter="10">
                        <el-col :span="4">
                        </el-col>
                        <el-col :span="4">
                        </el-col>
                        <span></span>
                    </el-row>
                    <el-table
                            @selection-change="selectChange"
                            class="table1"
                            :data="users"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                label="园区"
                                prop="name">
                            <template slot-scope="scope">
                                {{scope.row.communityId}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="樓棟"
                                prop="job">
                            <template slot-scope="scope">
                                {{scope.row.buildingId}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="楼层"
                                prop="build">
                            <template slot-scope="scope">
                                {{scope.row.floor}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="房间编号"
                                prop="tel">
                            <template slot-scope="scope">
                                {{scope.row.roomId}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="床位编号"
                                prop="time">
                            <template slot-scope="scope">
                                {{scope.row.bedId}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="房间价格"
                                prop="price">
                            <template slot-scope="scope">
                                {{scope.row.price}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                prop="do"
                                width="180">
                            <template slot-scope="scope">
                                <el-button
                                        class="c"
                                        size="mini"
                                        type="text"
                                        @click="handleEdit(scope.$index, scope.row)">
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-row>
                            <el-button type="primary" style="margin-left: 1000px;">批量移动</el-button>
                        </el-row>
                    </el-table>
                </el-card>
            </div>
            <div class="card-container2">
                <el-card class="card" style="margin-top: 10px; ">
                    <div slot="header" class="clearfix"></div>
                    <!-- 本科生人数卡片 -->
                    <el-card class="sub-card1">
                        <div slot="header">
                            <span style="font-weight: 700;font-size: 16px;text-align: left;color: #fff;">本科生拥有床位</span>
                            <span style="font-weight: 400;font-size: 14px;text-align: right;color: #fff;margin-left: 140px">查看名单调整</span>
                            <span style="width: 6.51px;height: 10.37px;color: #fff;">></span>
                        </div>
                        <div class="app"></div>
                        <div class="k1n1">
                            <span style="font-family: 'DIN Bold';font-weight: 700;font-size: 89px;text-align: left;color: #fff;">126560</span>
                            <span style="font-family: 'Source Han Sans CN Bold';font-weight: 700;font-size: 19px;text-align: left;color: #fff;">个</span>
                        </div>
                        <div style="font-family: 'Source Han Sans CN';font-weight: 400;font-size: 14px;text-align: left;color: #fff;">本科生正在使用床位</div>
                        <div>
                            <span style="font-family: 'DIN Bold';font-weight: 700;font-size: 36px;text-align: left;color: #fff;">12600</span>
                            <span style="font-family: 'Source Han Sans CN';font-weight: 400;font-size: 14px;text-align: left;color: #fff;">个</span>
                        </div>
                    </el-card>
                    <!-- 间隔 -->
                    <div class="gap"></div>
                    <!-- 研究生人数卡片 -->
                    <el-card class="sub-card2">
                        <div slot="header">
                            <span style="font-weight: 700;font-size: 16px;text-align: left;color: #fff;">研究生拥有床位</span>
                            <span style="font-weight: 400;font-size: 14px;text-align: right;color: #fff;margin-left: 140px">查看名单调整</span>
                            <span style="width: 6.51px;height: 10.37px;color: #fff;">></span>
                        </div>
                        <div class="app"></div>
                        <div class="k1n1">
                            <span style="font-family: 'DIN Bold';font-weight: 700;font-size: 89px;text-align: left;color: #fff;">126560</span>
                            <span style="font-family: 'Source Han Sans CN Bold';font-weight: 700;font-size: 19px;text-align: left;color: #fff;">个</span>
                        </div>
                        <div style="font-family: 'Source Han Sans CN';font-weight: 400;font-size: 14px;text-align: left;color: #fff;">研究生正在使用床位</div>
                        <div>
                            <span style="font-family: 'DIN Bold';font-weight: 700;font-size: 36px;text-align: left;color: #fff;">12600</span>
                            <span style="font-family: 'Source Han Sans CN';font-weight: 400;font-size: 14px;text-align: left;color: #fff;">个</span>
                        </div>
                    </el-card>
                    <!-- 教职工人数卡片 -->
                    <el-card class="sub-card3">
                        <div slot="header">
                            <span style="font-weight: 700;font-size: 16px;text-align: left;color: #fff;">教职工拥有床位</span>
                            <span style="font-weight: 400;font-size: 14px;text-align: right;color: #fff;margin-left: 140px">查看名单调整</span>
                            <span style="width: 6.51px;height: 10.37px;color: #fff;">></span>
                        </div>
                        <div class="app"></div>
                        <div class="k1n1">
                            <span style="font-family: 'DIN Bold';font-weight: 700;font-size: 89px;text-align: left;color: #fff;">126560</span>
                            <span style="font-family: 'Source Han Sans CN Bold';font-weight: 700;font-size: 19px;text-align: left;color: #fff;">个</span>
                        </div>
                        <div style="font-family: 'Source Han Sans CN';font-weight: 400;font-size: 14px;text-align: left;color: #fff;">教职工正在使用床位</div>
                        <div>
                            <span style="font-family: 'DIN Bold';font-weight: 700;font-size: 36px;text-align: left;color: #fff;">12600</span>
                            <span style="font-family: 'Source Han Sans CN';font-weight: 400;font-size: 14px;text-align: left;color: #fff;">个</span>
                        </div>
                    </el-card>
                </el-card></div>
        </div>
    </div>
</template>
<script>
import {url} from 'nightwatch/examples/pages/home'
import {removeUsers, userList} from '../../../../api/sixth'

export default {
  name: 'Sixth',
  data: function () {
    return {
      query: {
        communityId: '',
        price: '',
        floor: '',
        roomId: '',
        buildingId: '',
        bedId: '',
        isLived: '',
        id: '',
        major: '',
        studentRole: '',
        name: ''
      },
      value: '',
      dialogVisible: false,
      input: '',
      community: [],
      building: [],
      floors: [],
      users: []
    }
  },
  methods: {
    selectChange (value) {
      // 这里的value就是选中的数据构成的数组
      console.info(value)
      this.selectUsers = value
    },
    resetQuery () {
      this.query.communityId = ''
      this.query.buildingId = ''
      this.query.floor = ''
      // 其他需要重置的属性也可以在这里处理
    },
    removesBtn () {
      this.$confirm('此操作将永久删除选择的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = this.selectUsers.map(user => user.id)
        console.info(ids)
        // 要发送数组到后端，最好用post请求
        let obj = {
          ids: ids
        }
        removeUsers(obj).then(res => {
          if (res.data === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getUserList()
          } else {
            this.$message({
              message: '删除失败',
              type: 'warning'
            })
          }
        })
      }).catch(() => {
      })
    },
    url () {
      return url('C:/Users/华为/Desktop/555.png')
    },
    getUserList () {
      userList(this.query).then(res => {
        this.users = res.data.records
        this.total = res.data.total
      })
    }
  },
  created () {
    this.getUserList()
  }
}
</script>
<style scoped>
.title1 {
    color: #808080;
    font-size: 16px;
    font-face: Source Han Sans CN;
    font-weight: 700;
    letter-spacing: 0;
    padding: 16px;
    line-height: 60px;
}

.title2 {
    color: #1a1a1a;
    font-size: 16px;
    font-face: Source Han Sans CN;
    font-weight: 700;
    letter-spacing: 0;
}

.card-container1 {
    width: 70%;
    height: 943px;
    border-radius: 6px;
    background: #fff;
}
.card-container2{
    width: 30%;
    margin-left: 10px;
    height: 943px;
    border-radius: 6px;
    background: #fff;
}
.container{
    display: flex;
}
.sub-card1{
    width: 455px;
    height: 294px;
    background: transparent;
    background-image: url("../../../../assets/images/total/qq.png");
}
.sub-card2{
    width: 455px;
    height: 294px;
    background: transparent;
    background-image: url("../../../../assets/images/total/nm.png");
}
.sub-card3{
    width: 455px;
    height: 294px;
    background: transparent;
    background-image: url("../../../../assets/images/total/nd.png");
}
.c {
    background-image: url("../../../../assets/images/git/99.png");
}
.table1{
    width: 1121px;
    height: 943px;
    border-radius: 6px;
    background: #fff;
}
</style>
